<!--
 * @Descripttion: 1.5.1四项保证金统计表
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2021-04-01 09:27:17
 * @LastEditors: younghxp
 * @LastEditTime: 2022-02-21 14:45:18
-->
<template>
  <div class="container">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainConBox">
      <div class="filterBox">
        <el-row class="searchInputWidth">
          <el-form :inline="true" :model="filterField">
            <div class="baseSearch">
              <div class="baseSearchTitle">基本筛选</div>
              <div class="baseSearchBox">
                <el-form-item label="" class="row-padding-bottom">
                  <el-input
                    v-model="filterField.projectName"
                    placeholder="请输入项目名称"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="" class="row-padding-bottom">
                  <el-cascader
                    ref="manageArea"
                    v-model="areaId"
                    :options="areasOptions"
                    @change="getAreaId"
                    clearable
                    filterable
                    :props="{ checkStrictly: true }"
                    placeholder="请选择区域"
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="" class="row-padding-bottom">
                  <el-select
                    class="selectWidth"
                    v-model="filterField.industryId"
                    filterable
                    placeholder="请选择行业"
                    clearable
                  >
                    <el-option
                      v-for="item in industryOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.status"
                    class="baseSearchItem"
                    placeholder="请选择开工状态"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" class="row-padding-bottom">
                  <el-select
                    placeholder="请选择投资类别"
                    v-model="filterField.investment"
                    class="baseSearchItem"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in investmentOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" class="row-padding-bottom">
                  <timeSelection
                    @getStartTimeValue="getStartTimeValue"
                    @getEndTimeValue="getEndTimeValue"
                    :startTimeTitle="startTimeTitle"
                    :endTimeTitle="endTimeTitle"
                  ></timeSelection>
                </el-form-item>
                <el-form-item label="" class="row-padding-bottom">
                  <timeSelection
                    @getStartTimeValue="getStartTimeValueTwo"
                    @getEndTimeValue="getEndTimeValueTwo"
                    :startTimeTitle="startTimeTitleTwo"
                    :endTimeTitle="endTimeTitleTwo"
                  ></timeSelection>
                </el-form-item>
                <el-form-item class="searchBut">
                  <!-- <el-button
                    type="primary"
                    icon="icon iconfont iconchazhao1"
                    @click="searchList"
                    class="commonBtn"
                  ></el-button> -->
                  <el-button
                    type="primary"
                    icon="icon iconfont iconchazhao1"
                    @click="searchList"
                    class="searchBtn"
                  >
                    <span>搜索</span>
                  </el-button>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </el-row>
      </div>
      <div class="spacing"></div>
      <div class="proDetailsListBox">
        <div class="colSetupBottom">
          <el-button
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icondaochu"
            @click="getExportList"
          >
            <span class="opetareText">导出报表</span>
          </el-button>
        </div>
        <!-- 表格 -->
        <el-table
          :data="tableList"
          style="width: 100%"
          border
          ref="table"
          @sort-change="sortChange"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="80px"
            fixed="left"
          ></el-table-column>
          <!-- <el-table-column
            prop="projectName"
            label="项目名称"
            min-width="150px"
            align="left"
            fixed="left"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.projectName || "--" }}</p>
            </template>
          </el-table-column> -->
          <el-table-column label="项目名称" width="230" fixed="left">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="bidTotal"
            :sortable="true"
            label="投标保证金总金额（万元）"
            min-width="250px"
            align="center"
            :formatter="formatTd"
          >
            <!-- <template slot-scope="scope">
              <p>{{ scope.row.bidTotal || "--" }}</p>
            </template> -->
          </el-table-column>
          <el-table-column
            prop="bidBankTotal"
            sortable="custom"
            label="其中保函形式保证金（万元）"
            min-width="250px"
            align="center"
            :formatter="formatTd"
          >
            <!-- <template slot-scope="scope">
              <p>{{ scope.row.bidBankTotal || "--" }}</p>
            </template> -->
          </el-table-column>
          <el-table-column label="保函形式（万元）" align="center">
            <el-table-column
              prop="bidBankTotal"
              label="银行保函（万元）"
              sortable="custom"
              min-width="180px"
              align="center"
              :formatter="formatTd"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.bidBankTotal || "--" }}</p>
              </template> -->
            </el-table-column>
            <el-table-column
              prop="bidInsuranceTotal"
              label="商业保险（万元）"
              sortable="custom"
              min-width="180px"
              align="center"
              :formatter="formatTd"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.bidInsuranceTotal || "--" }}</p>
              </template> -->
            </el-table-column>
            <el-table-column
              prop="bidTripartiteTotal"
              label="第三方担保（万元）"
              sortable="custom"
              min-width="200px"
              align="center"
              :formatter="formatTd"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.bidTripartiteTotal || "--" }}</p>
              </template> -->
            </el-table-column>
          </el-table-column>
          <el-table-column label="其中现金形式保证金（万元）" align="center">
            <el-table-column
              prop="bidCashTotal"
              label="金额"
              min-width="100px"
              sortable="custom"
              align="center"
              :formatter="formatTd"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.bidCashTotal || "--" }}</p>
              </template> -->
            </el-table-column>
            <el-table-column
              prop="bidActReturnDate"
              label="退还时间"
              sortable="custom"
              min-width="150px"
              align="center"
            >
              <template slot-scope="scope">
                <p>{{ scope.row.bidActReturnDate || '--' }}</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="bidIsExceed"
              label="是否逾期（是、否）"
              min-width="200px"
              align="center"
              :formatter="formatbidIsExceed"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.bidIsExceed || "--" }}</p>
              </template> -->
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="performancTotal"
            label="履约保证金总金额(万元)"
            :sortable="true"
            min-width="220px"
            align="center"
            :formatter="formatTd"
          >
            <!-- <template slot-scope="scope">
              <p>{{ scope.row.performancTotal || "--" }}</p>
            </template> -->
          </el-table-column>
          <el-table-column
            prop="performancBankAll"
            label="其中保函形式保证金(万元)"
            :sortable="true"
            min-width="240px"
            align="center"
            :formatter="formatTd"
          >
            <!-- <template slot-scope="scope">
              <p>{{ scope.row.performancBankAll || "--" }}</p>
            </template> -->
          </el-table-column>
          <el-table-column label="保函形式（万元）" align="center">
            <el-table-column
              prop="performancBankTotal"
              label="银行保函（万元）"
              sortable="custom"
              min-width="180px"
              align="center"
              :formatter="formatTd"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.performancBankTotal || "--" }}</p>
              </template> -->
            </el-table-column>
            <el-table-column
              prop="performancInsuranceTotal"
              label="商业保险（万元）"
              sortable="custom"
              min-width="180px"
              align="center"
              :formatter="formatTd"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.performancInsuranceTotal || "--" }}</p>
              </template> -->
            </el-table-column>
            <el-table-column
              prop="performancTripartiteTotal"
              label="第三方担保（万元）"
              sortable="custom"
              min-width="200px"
              align="center"
              :formatter="formatTd"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.performancTripartiteTotal || "--" }}</p>
              </template> -->
            </el-table-column>
          </el-table-column>
          <el-table-column label="其中现金形式保证金（万元）" align="center">
            <el-table-column
              prop="performancCashTotal"
              label="金额"
              sortable="custom"
              min-width="100px"
              align="center"
              :formatter="formatTd"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.performancCashTotal || "--" }}</p>
              </template> -->
            </el-table-column>
            <el-table-column
              prop="performancActReturnDate"
              label="退还时间"
              sortable="custom"
              min-width="150px"
              align="center"
            >
              <template slot-scope="scope">
                <p>{{ scope.row.performancActReturnDate || '--' }}</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="performancIsExceed"
              label="是否逾期（是、否）"
              min-width="200px"
              align="center"
              :formatter="formatperformancIsExceed"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.performancIsExceed || "--" }}</p>
              </template> -->
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="qualityTotal"
            label="工程质量保证金总金额(万元)"
            :sortable="true"
            min-width="200px"
            align="center"
            :formatter="formatTd"
          >
            <!-- <template slot-scope="scope">
              <p>{{ scope.row.qualityTotal || "--" }}</p>
            </template> -->
          </el-table-column>
          <el-table-column
            prop="qualityBankAll"
            label="其中保函形式保证金(万元)"
            :sortable="true"
            min-width="240px"
            align="center"
            :formatter="formatTd"
          >
            <!-- <template slot-scope="scope">
              <p>{{ scope.row.qualityBankAll || "--" }}</p>
            </template> -->
          </el-table-column>
          <el-table-column label="保函形式（万元）" align="center">
            <el-table-column
              prop="qualityBankTotal"
              label="银行保函（万元）"
              sortable="custom"
              min-width="180px"
              align="center"
              :formatter="formatTd"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.qualityBankTotal || "--" }}</p>
              </template> -->
            </el-table-column>
            <el-table-column
              prop="qualityInsuranceTotal"
              label="商业保险（万元）"
              sortable="custom"
              min-width="180px"
              align="center"
              :formatter="formatTd"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.qualityInsuranceTotal || "--" }}</p>
              </template> -->
            </el-table-column>
            <el-table-column
              prop="qualityTripartiteTotal"
              label="第三方担保（万元）"
              sortable="custom"
              min-width="200px"
              align="center"
              :formatter="formatTd"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.qualityTripartiteTotal || "--" }}</p>
              </template> -->
            </el-table-column>
          </el-table-column>
          <el-table-column label="其中现金形式保证金（万元）" align="center">
            <el-table-column
              prop="qualityCashTotal"
              label="金额"
              min-width="100px"
              sortable="custom"
              align="center"
              :formatter="formatTd"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.qualityCashTotal || "--" }}</p>
              </template> -->
            </el-table-column>
            <el-table-column
              prop="qualityActReturnDate"
              label="退还时间"
              sortable="custom"
              min-width="150px"
              align="center"
            >
              <template slot-scope="scope">
                <p>{{ scope.row.qualityActReturnDate || '--' }}</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="qualityIsExceed"
              label="是否逾期（是、否）"
              min-width="200px"
              :formatter="formatIsExceed"
              align="center"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="depositTotal"
            label="农民工工资保证金总金额(万元)"
            :sortable="true"
            min-width="260px"
            align="center"
            :formatter="formatTd"
          >
            <!-- <template slot-scope="scope">
              <p>{{ scope.row.depositTotal || "--" }}</p>
            </template> -->
          </el-table-column>
          <el-table-column
            prop="depositBankAll"
            label="其中保函形式保证金(万元)"
            :sortable="true"
            min-width="240px"
            align="center"
            :formatter="formatTd"
          >
            <!-- <template slot-scope="scope">
              <p>{{ scope.row.depositBankAll || "--" }}</p>
            </template> -->
          </el-table-column>
          <el-table-column label="保函形式（万元）" align="center">
            <el-table-column
              prop="depositBankTotal"
              label="银行保函（万元）"
              sortable="custom"
              min-width="180px"
              align="center"
              :formatter="formatTd"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.depositBankTotal || "--" }}</p>
              </template> -->
            </el-table-column>
            <el-table-column
              prop="depositInsuranceTotal"
              label="商业保险（万元）"
              sortable="custom"
              min-width="180px"
              align="center"
              :formatter="formatTd"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.depositInsuranceTotal || "--" }}</p>
              </template> -->
            </el-table-column>
            <el-table-column
              prop="depositTripartiteTotal"
              label="第三方担保（万元）"
              sortable="custom"
              min-width="200px"
              align="center"
              :formatter="formatTd"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.depositTripartiteTotal || "--" }}</p>
              </template> -->
            </el-table-column>
          </el-table-column>
          <el-table-column label="其中现金形式保证金（万元）" align="center">
            <el-table-column
              prop="depositCashTotal"
              label="金额"
              sortable="custom"
              min-width="100px"
              align="center"
              :formatter="formatTd"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.depositCashTotal || "--" }}</p>
              </template> -->
            </el-table-column>
            <el-table-column
              prop="depositActReturnDate"
              label="退还时间"
              sortable="custom"
              min-width="150px"
              align="center"
            >
              <template slot-scope="scope">
                <p>{{ scope.row.depositActReturnDate || '--' }}</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="depositIsExceed"
              label="是否逾期（是、否）"
              min-width="200px"
              align="center"
              :formatter="formatDepositIsExceed"
            >
              <!-- <template slot-scope="scope">
                <p>{{ scope.row.depositIsExceed || "--" }}</p>
              </template> -->
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="depositDiffTotal"
            min-width="300px"
            sortable="custom"
            align="center"
            label="农民工工资差异化少缴免缴金数(万元)"
            :formatter="formatTd"
          >
            <!-- <template slot-scope="scope">
              <p>{{ scope.row.depositDiffTotal || "--" }}</p>
            </template> -->
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关数据"></emptyTable>
          </div>
        </el-table>
        <p class="annotation">
          注∶本表中退还时间指现金保证金的实际退还时间，是否逾期指按合同约定时间应退未退的逾期情况。
        </p>
        <!-- 分页 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          style="height: 52px"
        ></Pagination>
      </div>
    </div>
    <el-dialog
      title="正在生成数据，请稍后"
      :visible.sync="dialogVisible"
      width="400px"
      :close-on-click-modal="false"
      :show-close="false"
      class="loadData"
    >
      <el-progress
        :percentage="percentage"
        :color="customColor"
        :show-text="false"
      ></el-progress>
    </el-dialog>
  </div>
</template>
<script>
import common from '../../kits/common'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'projectDetailsReport',
  data() {
    return {
      tableHeight: null,
      titleText: '四项保证金统计表',
      showExcel: false,
      headerList: [], //列表头部数据
      tableList: [], //列表数据
      filterField: {
        areaId: '',
        industryId: '',
        status: '',
        investment: '',
        createDateStart: '',
        createDateEnd: '',
        startDateStart: '',
        startDateEnd: '',
        projectName: '',
      },
      startTimeTitle: '建档开始日期',
      endTimeTitle: '建档结束日期',
      startTimeTitleTwo: '开工开始日期',
      endTimeTitleTwo: '开工结束日期',
      paramsList: [],
      orderList: [], //条件筛选下拉
      date: '',
      startDate: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      loading: true,
      isShow: false, //列表加载
      percentage: 0,
      customColor: '#409eff',
      dialogVisible: false,
      startPro: '',
      requestUrl: 'api-d/trinomial/expand/quadrinomial/list',
      selectData: '',
      valData: [],
      inputLen: '',
      areaId: '', //区域
      mark: 'projectDetailReport',
      isOpenData: [],
      isSetup: [],
      colSetupTableTotle: [],
      isShowDialog: false,
      isShowExcel: false,
      andOr: '且',
      isEquip: [],
    }
  },
  computed: {
    ...mapState([
      'investmentOptions',
      'statusOptions',
      'areasOptions',
      'industryOptions',
    ]),
  },
  created() {
    if (this.$store.state.userType == 'FINANCE') {
      this.$store.commit('SET_INFO', [
        'investmentOptions',
        [{ id: 'GOV', name: '政府投资' }],
      ])
    } else {
      this.getInvestmenttype({})
    }
    this.getStatus({})
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    this.getIndustry({})
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  mounted() {
    if (this.$route.query.areaId) {
      this.areaId = this.$route.query.areaId
      this.filterField.areaId = this.$route.query.areaId
      this.$refs.pagination.getTableListData()
    }
  },
  methods: {
    /**
     * @description: 格式化是否逾期
     */
    formatIsExceed(row, column) {
      switch (row.qualityIsExceed) {
        case true:
          return '是'
          break
        case false:
          return '否'
          break
        default:
          return '--'
      }
    },
    /**
     * @description: 格式化是否逾期
     */
    formatbidIsExceed(row, column) {
      switch (row.bidIsExceed) {
        case true:
          return '是'
          break
        case false:
          return '否'
          break
        default:
          return '--'
      }
    },
    /**
     * @description: 格式化是否逾期
     */
    formatperformancIsExceed(row, column) {
      switch (row.performancIsExceed) {
        case true:
          return '是'
          break
        case false:
          return '否'
          break
        default:
          return '--'
      }
    },
    /**
     * @description: 格式化是否逾期
     */
    formatDepositIsExceed(row, column) {
      switch (row.depositIsExceed) {
        case true:
          return '是'
          break
        case false:
          return '否'
          break
        default:
          return '--'
      }
    },
    /**
     * @description: 获取开始日期
     * @param {*} urls
     * @param {*} datas
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.createDateStart = val
      } else {
        this.filterField.createDateStart = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.createDateEnd = val
      } else {
        this.filterField.createDateEnd = ''
      }
    },
    /**
     * @description: 获取开始日期
     * @param {*} urls
     * @param {*} datas
     */
    getStartTimeValueTwo(val) {
      if (val) {
        this.filterField.startDateStart = val
      } else {
        this.filterField.startDateStart = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValueTwo(val) {
      if (val) {
        this.filterField.startDateEnd = val
      } else {
        this.filterField.startDateEnd = ''
      }
    },
    ...mapActions([
      'getInvestmenttype',
      'getStatus',
      'getAreas',
      'getIndustry',
    ]),
    getTableList(data) {
      this.percentage = 100
      var that = this
      setTimeout(function () {
        that.dialogVisible = false
      }, 200)
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    searchList() {
      var that = this
      that.dialogVisible = true
      that.$refs.pagination.getTableListData()
    },
    //获取选中的区域最后一级id
    getAreaId(val) {
      var areaId = this.areaId[this.areaId.length - 1]
      if (val.length > 0) {
        this.filterField.areaId = areaId
      } else {
        this.filterField.areaId = ' '
      }
    },
    // 导出报表
    getExportList(val) {
      const vm = this
      if (this.tableList.length > 0) {
        window.location.href =
          common.commonApi +
          'api-d/trinomial/expand/quadrinomial/export?areaId=' +
          vm.filterField.areaId +
          '&industryId=' +
          vm.filterField.industryId +
          '&investment=' +
          vm.filterField.investment +
          '&status=' +
          vm.filterField.status +
          '&projectName=' +
          encodeURIComponent(vm.filterField.projectName) +
          '&createDateStart=' +
          vm.filterField.createDateStart +
          '&createDateEnd=' +
          vm.filterField.createDateEnd +
          '&startDateStart=' +
          vm.filterField.startDateStart +
          '&startDateEnd=' +
          vm.filterField.startDateEnd +
          '&sort=' +
          vm.filterField.sort +
          '&sortField=' +
          vm.filterField.sortField +
          '&access_token=' +
          localStorage.getItem('access_token')
      } else {
        this.$message({
          type: 'error',
          message: '无数据导出',
        })
      }
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  .filterBox {
    background: #fff;
    padding: 24px 0px 0px;
  }
  .mainConBox {
    // position: absolute;
    // top: 197px;
    // left: 24px;
    // right: 24px;
    // bottom: 24px;
    // overflow-y: auto;
    .baseSearch {
      position: relative;
      padding-left: 102px;
      &Title {
        position: absolute;
        top: 0;
        left: 0;
        height: 36px;
        line-height: 36px;
        width: 96px;
        text-align: right;
        display: inline-block;
        font-size: 14px;
        color: #606266;
      }
      &Box {
        margin-left: 10px;
      }
    }
    .moreSearch {
      position: relative;
      padding-left: 112px;
      &Title {
        position: absolute;
        top: 0;
        left: 0;
        height: 36px;
        line-height: 36px;
        width: 96px;
        text-align: right;
        display: inline-block;
        font-size: 14px;
        color: #606266;
      }
      &List {
        margin-bottom: 24px;
        position: relative;
        &:last-of-type {
          margin-bottom: 0 !important;
        }
        &Left {
          float: left;
        }
        &Right {
          float: left;
          margin-left: 46px;
          width: 230px;
          .el-input {
            width: 100%;
          }
        }
        &Num {
          /deep/ .el-input__inner {
            width: 105px !important;
          }
        }
        .buttonBox {
          float: left;
          margin-top: 5.5px;
          margin-left: 24px;
          .funcBox {
            width: 20px;
            height: 20px;
            cursor: pointer;
          }
        }
      }
      .cable {
        position: absolute;
        left: 109px;
        top: 0;
        bottom: 0;
        margin-top: 8px;
        margin-right: 5px;
        margin-bottom: 8px;
        &:before {
          content: ' ';
          position: absolute;
          top: 0;
          left: 50%;
          width: 2px;
          height: 100%;
          overflow: hidden;
          background: #d6efe8;
        }
        > span {
          width: 18px;
          height: 18px;
          line-height: 18px;
          font-size: 12px;
          position: relative;
          display: block;
          top: 50%;
          left: 0;
          right: 0;
          transform: translateY(-50%);
          border-radius: 3px;
          background: #d6efe8;
          color: #009588;
          font-weight: 700;
          text-align: center;
          cursor: pointer;
          user-select: none;
        }
      }
      /deep/ .el-form-item {
        margin-bottom: 0 !important;
      }
      &Box {
        width: 97.5%;
      }
    }
    .actionBox {
      position: relative;
      padding-left: 112px;
      &Add {
        line-height: 34px;
        border-radius: 18px;
        width: 76px;
        border-color: #009588;
        color: #009588;
        padding: 0;
      }
      &Search {
        position: absolute;
        top: 0;
        right: 17px;
      }
      .searchBut {
        float: right;
      }
    }
    .proDetailsListBox {
      padding: 24px;
      background: #fff;
      // margin-top: 10px;
      .colSetupBottom {
        margin-bottom: 24px;
        float: left;
        .colSetupBtn {
          float: left;
          margin-right: 20px;
        }
        /deep/ button.el-button.commonBut.saveBtn.funComBut.el-button--default {
          float: right;
        }
      }
    }
  }
  .boxTop {
    margin-top: 24px;
  }
  .mL {
    margin-left: 25px;
  }

  .mLTen {
    margin-left: 10px !important;
  }
  .loadData/deep/ .el-dialog__header {
    border-bottom: none;
    text-align: center;
  }
  .searchInputWidth .el-input__inner {
    width: 280px;
  }
  /deep/.rangeWidth .el-input__inner {
    width: 70px;
  }
}
.annotation {
  font-size: 14px;
  margin-top: 10px;
  color: #666666;
}
@import '../../../static/css/filterArea.less';
</style>
